<script setup lang="ts">
import { useNotify } from 'nutui-uniapp/composables'
import { storeToRefs } from 'pinia'
import { onMounted, reactive } from 'vue'
import { useUserStore } from '@/stores/user'
import Login from '../login/index.vue'

// 定义页面
definePage({
  style: {
    'navigationStyle': 'default',
    'navigationBarTitleText': '我的',
    'app-plus': {
      titleNView: false,
      bounce: 'none',
    },
    'h5': {
      titleNView: false,
    },
  },
})

const notify = useNotify()
// 用户存储
const userStore = useUserStore()
const { isLogin, readAvatar, readUserInfo } = storeToRefs(userStore)

// 状态参数
const state = reactive({
  count: [
    {
      num: 5,
      text: '我的收藏',
    },
    {
      num: 7,
      text: '我的足迹',
    },
    {
      num: 1,
      text: '优惠券',
    },
  ],
  navs: [
    {
      icon: '\u{E602}',
      text: '待付款',
    },
    {
      icon: '\u{E601}',
      text: '待发货',
    },
    {
      icon: '\u{E603}',
      text: '待收货',
    },
    {
      icon: '\u{E604}',
      text: '待评价',
    },
    {
      icon: '\u{E60A}', // 原代码：&#xe60a;
      text: '退款',
    },
  ],
})

// 账号管理
function handleUserAction() {
  uni.navigateTo({
    url: '/pages/mine/account',
  })
}

// 头像加载失败
function loadAvatarError() {
  userStore.useEmptyAvatar()
}

// 未实装提示
function underConstruction() {
  notify.warning('本功能未实装，可自行实现')
}

onMounted(async () => {
  await userStore.refreshUserInfo()
})
</script>

<template>
  <z-paging
    :loading-more-enabled="false"
    :refresher-enabled="false"
    overflow-hidden
  >
    <view flex-col>
      <template v-if="isLogin">
        <nut-notify />
        <view class="user-board">
          <view class="bg-radius" />
          <view class="logo" flex>
            <image
              class="logo-img"
              :src="readAvatar"
              @error="loadAvatarError"
              @click="handleUserAction"
            />
            <view class="logo-title" @click="handleUserAction">
              <text class="uer-name">
                {{ readUserInfo.nickname }}
              </text>
            </view>
            <view class="count" flex>
              <view
                v-for="(c, index) in state.count"
                :key="index"
                class="count-item"
                flex
                @click="underConstruction"
              >
                <text class="count-item-num">
                  {{ c.num }}
                </text>
                <text class="count-item-text">
                  {{ c.text }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view flex-col>
          <view class="center-nav" mt-18rpx>
            <view class="center-nav-title">
              <text>我的订单</text>
            </view>
            <view class="center-nav-content">
              <view
                v-for="(nav, index) in state.navs"
                :key="index"
                class="center-nav-item"
                flex
                @click="underConstruction"
              >
                <text class="center-nav-item-icon">
                  {{ nav.icon }}
                </text>
                <text class="center-nav-item-text">
                  {{ nav.text }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <nut-cell-group class="no-radius">
          <nut-cell
            title="账号管理"
            icon="my"
            size="large"
            to="/pages/mine/account"
          />
          <nut-cell
            title="收货地址"
            icon="cart"
            size="large"
            is-link
            @click="underConstruction"
          />
          <nut-cell
            title="帮助与反馈"
            icon="ask"
            size="large"
            is-link
            @click="underConstruction"
          />
          <nut-cell
            title="服务条款"
            icon="tips"
            size="large"
            is-link
            @click="underConstruction"
          />
          <nut-cell
            title="设置"
            icon="setting"
            size="large"
            is-link
            @click="underConstruction"
          />
          <nut-cell
            title="关于"
            icon="shop"
            size="large"
            is-link
            to="/pages/mine/about"
          />
        </nut-cell-group>
      </template>
      <Login v-else :show-copyright="false" />
    </view>
  </z-paging>
</template>

<style lang="scss">
  @font-face {
    font-family: texticons;
    font-weight: normal;
    font-style: normal;
    src: url('@/static/fonts/font-shop.ttf') format('truetype');
  }
</style>

<style lang="scss" scoped>
  .user-board {
    width: 100vw;
    height: 435rpx;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    background: #f5f5f5 url('@/static/board-head.png') top center no-repeat;

    .bg-radius {
      background-color: #fff;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      width: 120vw;
      height: 550rpx;
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      margin-left: -60vw;
      top: 150rpx;
      z-index: 8;
    }
    .logo {
      background-color: transparent;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      width: 100vw;
      box-sizing: border-box;
      flex-direction: column;
      align-items: center;
      position: absolute;
      left: 0;
      top: 70rpx;
      z-index: 9;

      .logo-img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        border: solid 8rpx #efefef;
        background-color: #fff;
      }

      .logo-title {
        height: 150rpx;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;

        .uer-name {
          height: 60rpx;
          line-height: 60rpx;
          font-size: 34rpx;
          color: #333;
        }
      }

      .count {
        margin: 30rpx auto 0rpx;
        width: 100vw;
        .count-item {
          flex-direction: column;
          flex: 1;
          text-align: center;

          .count-item-num {
            color: #333;
            font-size: 36rpx;
            font-weight: 500;
          }
          .count-item-text {
            color: #333;
            font-size: 28rpx;
            font-weight: 400;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
  .center-nav {
    background-color: #ffffff;
    padding-top: 1rpx;
    width: 100vw;
    flex-direction: column;

    .center-nav-title {
      padding: 25rpx 30rpx;
      font-size: 30rpx;
      color: #333;
      font-weight: 400;
      border-bottom: solid 1rpx #efefef;
    }
    .center-nav-content {
      height: 180rpx;
      display: flex;
      align-items: center;
      .center-nav-item {
        flex-direction: column;
        flex: 1;
        text-align: center;

        .center-nav-item-icon {
          color: #333;
          font-size: 48rpx;
          font-weight: 500;
          font-family: texticons;
        }
        .center-nav-item-text {
          color: #666;
          font-size: 26rpx;
          font-weight: 400;
          margin-top: 15rpx;
        }
      }
    }
  }
</style>
